<template>
  <div class="main_left column-flex">
    <!--  上  -->
    <div class="box module-top">
      <!-- 标题 -->
      <h1 class="left-title sp-flex">
        <span>设备状态</span>
        <el-select
          size="mini"
          clearable
          v-model="equipment_status"
          placeholder="请选择"
          @change="changeEquipment"
        >
          <el-option
            v-for="item in assetsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </h1>
      <div class="container">
        <EquipmentStatu ref="equipment_statu" @clickEvent="clickEvent" />
      </div>
    </div>
    <!--  中  -->
    <div class="box module-middle">
      <!-- 标题 -->
      <h1 class="left-title sp-flex">
        <span>使用状态</span>
        <el-select
          size="mini"
          v-model="equipmentuser_status"
          placeholder="请选择"
          clearable
          @change="changeEquipmentuser"
        >
          <el-option
            v-for="item in assetsArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </h1>
      <div class="container">
        <UseStatu ref="use_statu" @clickEvent="clickEvent" />
      </div>
    </div>
    <!--  下  -->
    <div class="box module-bottom column-flex">
      <h1 class="left-title">长时间未上线终端TOP5</h1>
      <NotBeenOnline :lists="notOnlineList" />
    </div>
    <searchDialog
      ref="riskDialogRef"
      :total="total"
      :searchFormObj="assetsFormObj"
      :tableList="assetsTableList"
      :tableData="tableData"
      :totalInfo="safeConcernsoTalInfo"
      :show-total-info="safeConcernsoTalInfo.length > 0"
      @getTableList="getTableList"
      @operateEvent="operateEvent"
      operateName="进入画像"
      :operateOpen="operateOpen"
    />
  </div>
</template>

<script>
import EquipmentStatu from "@/components/echarts/assets/equipmentStatu.vue";
import UseStatu from "../../../echarts/assets/useStatu.vue";
import NotBeenOnline from "@/components/assets/notBeenOnline.vue";
import {
  equipmentStatus,
  equipmentUseStatus,
  assetsListPage,
  offLineDaysTop,
  assetsTypeRingRatio,
} from "@/api/assetSituation";
import Obj from "../components/tableData/index";
import { cloneDeep } from "@/utils/loadash-es";
import SearchDialog from "@/components/common/searchDialog.vue";
export default {
  components: { EquipmentStatu, UseStatu, NotBeenOnline, SearchDialog },
  data() {
    return {
      // 是否显示进入画像
      operateOpen: false,
      equipment_status: "",
      equipmentuser_status: "",
      queryParams: {
        searchType: this.$store.state.searchType || "3",
        current: 1,
        size: 10,
      },
      assetsArr: cloneDeep(Obj.assetsArr),
      // 对话框总数
      total: 0,
      // 对话框表格
      tableData: [],
      // 数据结构
      assetsTableList: cloneDeep(Obj.assetsTableList),
      safeConcernsoTalInfo: [],
      notOnlineList: [],
      equipment_status_timer: null,
      equipment_user_status_timer: null,
      esIdx: 0,
      esuIdx: 0,
    };
  },
  computed: {
    // 资产概览
    assetsFormObj: {
      get() {
        return {
          fieldList: cloneDeep(Obj.assetsFormObj.fieldList),
          searchData: {
            keyWord: "",
            equipmentStatus: "",
            useStatus: "",
            secLevel: "",
            equipmentType: "",
          },
          btnHidden: true,
          //  是否有额外的参数
          isNeedResetExtraParam: false,
          listTypeInfo: {
            equipmentStatusList: this.$store.state.equipmentStatusList,
            useStatusList: this.$store.state.useStatusList,
            secLevelList: this.$store.state.secLevelList,
            equipmentTypeList: this.$store.state.equipmentTypeList,
          },
        };
      },
      set() {},
    },
  },
  methods: {
    // 获取展示表格
    getInfo(val) {
      assetsTypeRingRatio(val).then((res) => {
        let name = this.assetsArr.filter((item) => {
          return item.value == val;
        })[0]?.label;

        this.safeConcernsoTalInfo = res.typeList.map((item) => {
          return {
            name: item.name + "（台）",
            value: item.num,
          };
        });
        this.safeConcernsoTalInfo.unshift({
          name: name + "（台）",
          value: res.all?.num,
        });
      });
    },

    // 改变状态
    changeEquipment(val) {
      this.getInfo(val);
      equipmentStatus(val).then((res) => {
        this.$refs.equipment_statu.getData(res);
      });
    },
    // 使用状态改变
    changeEquipmentuser(val) {
      this.getInfo(val);

      equipmentUseStatus(val).then((res) => {
        if (this.$refs.use_statu) this.$refs.use_statu.getData(res);
      });
    },
    // 获取数据
    getDatas(val) {
      this.queryParams = {
        ...this.queryParams,
        ...val,
      };
      // 设备状态
      equipmentStatus().then((res) => {
        this.$refs.equipment_statu.getData(res);
      });
      // 设备使用状态
      equipmentUseStatus().then((res) => {
        this.$refs.use_statu.getData(res);
      });
      // 未上线top5
      offLineDaysTop().then((res) => {
        this.notOnlineList = res;
      });
    },
    getTableList(val) {
      this.refreshData(val);
    },
    operateEvent(data) {
      window.open(window.urlPrefix + "dispose/entityPortrait/" + data.row.id);
    },
    clickEvent(data) {
      this.operateOpen = false;
      if (data.type == "use") {
        if (
          this.equipmentuser_status == "assets_host" ||
          this.equipmentuser_status == "assets_server"
        ) {
          this.operateOpen = true;
        }
        // 设备使用状态
        let useStatus =
          data.name == "使用中" ? "1" : data.name == "空闲" ? "2" : "3";
        this.assetsFormObj.searchData = {
          keyWord: "",
          equipmentStatus: "",
          useStatus,
          secLevel: "",
          equipmentType: "",
          assets_type: this.equipmentuser_status,
        };

        if (this.safeConcernsoTalInfo.length > 0 && this.equipmentuser_status) {
          let name = this.assetsArr.filter((item) => {
            return item.value == this.equipmentuser_status;
          })[0].label;
          this.safeConcernsoTalInfo[0].name = name;
        } else if (!this.equipmentuser_status) {
          this.safeConcernsoTalInfo = [];
        }

        this.refreshData({
          useStatus,
          assets_type: this.equipmentuser_status,
        }).then((res) => {
          this.$refs.riskDialogRef.open = true;
        });
      } else {
        if (
          this.equipment_status == "assets_host" ||
          this.equipment_status == "assets_server"
        ) {
          this.operateOpen = true;
        }
        // 设备状态
        let equipmentStatus =
          data.name == "正常" ? "1" : data.name == "维护中" ? "2" : "3";
        this.assetsFormObj.searchData = {
          keyWord: "",
          equipmentStatus,
          useStatus: "",
          secLevel: "",
          equipmentType: "",
          assets_type: this.equipmentuser_status,
        };

        if (this.safeConcernsoTalInfo.length > 0 && this.equipment_status) {
          let name = this.assetsArr.filter((item) => {
            return item.value == this.equipment_status;
          })[0].label;
          this.safeConcernsoTalInfo[0].name = name;
        } else if (!this.equipment_status) {
          this.safeConcernsoTalInfo = [];
        }
        this.refreshData({
          equipmentStatus,
          assets_type: this.equipmentuser_status,
        }).then((res) => {
          this.$refs.riskDialogRef.open = true;
        });
      }
    },
    // 刷新二级弹窗
    refreshData(query) {
      let newQuery = {
        ...this.queryParams,
        ...query,
        searchType: this.$store.state.searchType || "1",
      };
      return new Promise((resolve, reject) => {
        assetsListPage(newQuery).then((res) => {
          this.total = res.total;
          this.tableData = res.list;
          resolve(this.tableData);
        });
      });
    },
    equipmentLoop() {
      this.equipment_status_timer = setInterval(() => {
        this.equipment_status = this.assetsArr[this.esIdx].value;
        this.changeEquipment(this.equipment_status);
        if (this.esIdx == 7) {
          this.esIdx = 0;
        } else {
          this.esIdx++;
        }
      }, 30000);
      this.equipment_user_status = setInterval(() => {
        this.equipmentuser_status = this.assetsArr[this.esuIdx].value;
        this.changeEquipmentuser(this.equipmentuser_status);
        if (this.esuIdx == 7) {
          this.esuIdx = 0;
        } else {
          this.esuIdx++;
        }
      }, 30000);
    },
  },
  mounted() {
    this.equipmentLoop();
  },
  destroyed() {
    clearInterval(this.equipment_user_status_timer);
    this.equipment_user_status_timer = null;
    clearInterval(this.equipment_status_timer);
    this.equipment_status_timer = null;
  },
  watch: {
    "$store.state.searchType": {
      handler(newValue, oldValue) {
        this.getDatas({
          searchType: newValue,
        });
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 90%;
}
.module-top {
  height: 32% !important;
}
.module-middle {
  height: 32% !important;
}
.module-bottom {
  height: 34% !important;
}
</style>
